<template>
	<view>
		<div style="width: 100vw;">
			<div class="navbar">
				<img src="@/static/切图/custom-banner.png" alt="" style="width: 96vw;margin: 2vw;" />
				<h2 style="text-align: center;margin-bottom: 2vw;">钻石选购流程</h2>
				<div style="display: flex; ">
					<div class="navbar-item" style="">
						<div style="display: flex; align-items: center;">
							<img src="@/static/切图/custom-step1-black.png" alt="选主钻" style="width: 18px; height: 18px;">
							<span class="navbar-text">选主钻</span>
						</div>

					</div>
					<div class="navbar-item2">
						<div style="display: flex; align-items: center;">
							<img src="@/static/切图/custom-step2-white.png" alt="图标" style="width: 18px; height: 18px; ">
							<span style="color: white;" class="navbar-text">选戒环</span>
						</div>
					</div>
					<div class="navbar-item3">
						<div style="display: flex; align-items: center;">
							<img src="@/static/切图/custom-step3-black.png" alt="图标" style="width: 18px; height: 18px;">
							<span class="navbar-text">完成定制</span>
						</div>
					</div>
				</div>
				<div style="display: flex;justify-content: space-around;align-items: center;text-align: center;">
					<div style="margin-bottom: 10px;font-size: 13px;width: 23vw;color:#4C808080;">未选择主钻</div>
					<div style="margin-bottom: 10px;font-size: 13px;width: 23vw;color:#4C808080;">辉煌 18k白金 ￥10100</div>
					<div style="margin-bottom: 10px;font-size: 13px;width: 23vw;color:#4C808080;"></div>
				</div>
			</div>
		</div>
		<div class="selecter-container">
			<div style="display: flex;">
				<div class="title">
					<p>（默认）圆形钻石</p>
					<img src="@/static/切图/custom-icon-close.png" style="width: 15px;height: 15px;margin-left: 10px;" />
				</div>
				<div class="title">
					<p>辉煌 18k白金戒环</p>
				</div>
			</div>
			<div style="position: relative;">
				<img id="selecter" src="@/static/切图/21009121_10001.jpg" />
				<div style=" position: relative;top:-80px">
					<div style="display: flex;justify-content:space-evenly;">
						<div class="select-item" @click="change(1)">
							<img src="@/static/切图/white-gold.png" alt="Circle Image" id='btn1'>
							<p>白金</p>
						</div>
						<div class="select-item" @click="change(2)">
							<img src="@/static/切图/gold.png" alt="Circle Image" id='btn2'>
							<p>黄金</p>
						</div>
						<div class="select-item" @click="change(3)">
							<img src="@/static/切图/rose-gold.png" alt="Circle Image" id='btn3'>
							<p>玫瑰金</p>
						</div>
						<div class="select-item" @click="change(4)">
							<img src="@/static/切图/platinum-gold.png" alt="Circle Image" id='btn4'>
							<p>铂金</p>
						</div>
					</div>
					<div style="position: relative;">
						<img class="banner" src="@/static/切图/banner1.png" />
						<img src="@/static/切图/custom-icon-left.png"
							style="width: 18px;position: absolute;right:10px;top:12px" />
					</div>
					<div style="position: relative;">
						<img class="banner" src="@/static/切图/banner2.png" />
						<img src="@/static/切图/custom-icon-left.png"
							style="width: 18px;position: absolute;right:10px;top:12px" />
					</div>
				</div>
			</div>
			<div style="background-color: white;padding-bottom: 10px">
				<h2 style="text-align: center; position: relative;margin-top: -80px;">主钻形状</h2>
				<div class="shape-selecter">
					<div style="display: flex;justify-content:space-evenly;margin: 0 auto; ">
						<div class="select-item" @click="changeShape(1)" id="shape1">
							<img src="@/static/切图/custom-diamond-1.png" alt="Circle Image" class='shape-img'>
							<p>圆形</p>
						</div>
						<div class="select-item" @click="changeShape(2)" id="shape2">
							<img src="@/static/切图/custom-diamond-2.png" alt="Circle Image" class='shape-img'>
							<p>椭圆形</p>
						</div>
						<div class="select-item" @click="changeShape(3)" id="shape3">
							<img src="@/static/切图/custom-diamond-3.png" alt="Circle Image" class='shape-img'>
							<p>祖母绿形</p>
						</div>
						<div class="select-item" @click="changeShape(4)" id="shape4">
							<img src="@/static/切图/custom-diamond-4.png" alt="Circle Image" class='shape-img'>
							<p>方形</p>
						</div>
						<div class="select-item" @click="changeShape(5)" id="shape5">
							<img src="@/static/切图/custom-diamond-5.png" alt="Circle Image" class='shape-img'>
							<p>水滴型</p>
						</div>
						<div class="select-item" @click="changeShape(6)" id="shape6">
							<img src="@/static/切图/custom-diamond-6.png" alt="Circle Image" class='shape-img'>
							<p>心形</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			changeShape(val) {
				for (var i = 1; i <= 6; i++) {
					var shape = document.getElementById("shape" + i);
					if (shape) {
						var img = shape.querySelector('.shape-img');
						var p = shape.querySelector('p');
						img.style.border = "none";
						p.style.color = 'black';
					}

					var selectedShape = document.getElementById("shape" + val);
					if (selectedShape) {
						var img = selectedShape.querySelector('.shape-img');
						var p = selectedShape.querySelector('p');
						img.style.border = "1px solid red";
						img.style.borderRadius = "50%";
						p.style.color = "red";
					}
				}
			},
			change(val) {
				var img = document.getElementById("selecter");
				for (var i = 1; i <= 4; i++) {
					var btn = document.getElementById("btn" + i);
					if (btn) {
						btn.style.border = "none";
					}
				}
				var selectedBtn = document.getElementById("btn" + val);
				if (selectedBtn) {
					selectedBtn.style.border = "2px solid red";
					selectedBtn.style.borderRadius = "50%";
				}
				switch (val) {
					case 1:
						img.src = "/static/切图/21009121_10001.jpg";
						break;
					case 2:
						img.src = "/static/切图/21009221_10001.jpg";
						break;
					case 3:
						img.src = "/static/切图/21009321_10001.jpg";
						break;
					case 4:
						img.src = "/static/切图/21009421_10001.jpg";
						break;
					default:
						break;
				}
			}

		},

	};
</script>

<style>
	.navbar {
		background-color: white;
		width: 100vw;
	}

	.navbar-item {
		background: url('/static/切图/custom-tab-select.png');
		position: relative;
		left: 4vw;
		top: 0;
		z-index: 3;
		display: flex;
		justify-content: center;

		align-items: center;

		background-repeat: no-repeat;

		background-position: center;

		width: 40vw;
		height: 60px;
	}

	.navbar-text {
		height: 24px;
		font-weight: bold;
	}

	.navbar-item2 {
		background: url('/static/切图/custom-tab-active.png');
		position: relative;
		left: -20px+4vw;
		top: 0;
		z-index: 2;
		display: flex;
		justify-content: center;

		align-items: center;

		background-repeat: no-repeat;

		background-position: center;

		width: 40vw;
		height: 60px;
	}

	.navbar-item3 {
		background: url('/static/切图/custom-tab-null.png');
		position: relative;
		left: -15px;
		z-index: 1;
		display: flex;
		justify-content: center;

		align-items: center;


		background-size: 90%;
		background-repeat: no-repeat;

		background-position: center center;

		width: 40vw;
	}

	#selecter {
		width: 96vw;
	}

	.banner {
		width: 96vw;
	}

	.select-item {
		text-align: center;
	}

	.selecter-container {
		background-color: white;
		width: 96vw;
		height: 96vw;
		margin: 2vw;
	}

	.shape-img {
		width: 15vw;
	}

	.title {
		display: flex;
		background-color: #f1f1f1d9;
		width: 45vw;
		height: 40px;
		margin: 2.5vw;
		justify-content: center;
		font-weight: bold;
		text-align: center;
		align-items: center;
	}
</style>